<template>
  <div class="detal">
    <div class="header">
      <div class="top">
        <div @click="$router.go(-1)"><van-icon name="arrow-left" /></div>
      </div>
      <img v-lazy="prefList.src" />
      <div class="content">
        <div class="price">
          ￥<span>{{ prefList.price }}</span
          ><span>折前{{ prefList.oldPrice }}</span>
        </div>
        <div class="title">{{ prefList.title }}</div>
        <div class="mess">
          <span>{{ prefList.sex }}</span
          ><span>{{ prefList.ster }}</span
          ><span>生日：{{ prefList.birthday }}</span>
        </div>
        <div class="des" v-for="it in prefList.descrption" :key="it.id">
          <div><van-icon name="like" />{{ it.title }}</div>
        </div>
        <div class="look">查看全部</div>
        <div class="titles">
          <em>配送</em><span><van-icon name="checked" />航空配送</span
          ><span><van-icon name="checked" />汽车配送</span
          ><span><van-icon name="checked" />买家自提</span>
        </div>
      </div>
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="share-o" text="分享" />
      <van-goods-action-icon icon="star-o" text="收藏" />
      <van-goods-action-button text="在线咨询" />
      <van-goods-action-button type="warning" text="担保支付" />
    </van-goods-action>
  </div>
</template>

<script>
import MockService from "../../apis/MockService.js";
import { dateFormat } from "../../components";

export default {
  data() {
    return {
      prefList: [],
    };
  },

  created() {
    let id = this.$route.query.it;
    // this.prefList = It;
    console.log("detailId", id);
    this.getList(id);
  },
  methods: {
    async getList(id) {
      let result = await MockService.getPrefListApi();
      console.log(result);
      if (result.code === 200) {
        this.prefList = result.data.rows.find((it) => {
          if (id == it.id) return it;
        });
      }
      console.log(this.prefList);
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../style/common.less";

.detal {
  height: 100%;
  background-color: #eaeaea;
  .header {
    height: calc(100% - 49px);
    overflow: scroll;
    position: relative;
    > .top {
      position: absolute;
      width: 100%;
      height: 50px;
      > div {
        width: 30px;
        height: 30px;
        margin: 5px 10px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.239);
        text-align: center;
        line-height: 30px;
        .van-icon-arrow-left {
          color: #fff;
        }
      }
    }
    > img {
      width: 100%;
      height: 342px;
      border-radius: 0 0 20px 20px;
    }
    > .content {
      position: relative;
      overflow: hidden;
      &::after {
        position: absolute;
        top: 10px;
        right: -20px;
        content: "特惠";
        padding: 5px 30px;
        background-color: #eca00e;
        color: #fff;
        font-size: 12px;
        letter-spacing: 2px;
        transform: rotate(45deg);
      }
      padding: 15px 10px;
      margin: 0 15px;
      background-color: #fff;
      border-radius: 20px;
      > .price {
        margin-bottom: 10px;
        color: #f86b1c;
        font-size: 8px;
        span:nth-child(1) {
          margin-right: 15px;
          font-size: 18px;
          font-weight: 600;
        }
        span:nth-child(2) {
          padding: 3px 10px;
          background-color: #fd6204;
          color: #fff;
          font-size: 10px;
          letter-spacing: 1px;
          border-radius: 15px;
        }
      }
      > .title {
        font-size: 18px;
        font-weight: 600;
      }
      > .mess {
        margin: 10px 0 18px 0;
        color: #999;
        font-size: 14px;
        span:nth-child(1) {
          padding: 5px 8px;
          border: 1px solid rgb(39, 119, 224);
          background-color: skyblue;
          color: #095dff;
          border-radius: 8px;
        }
        span:nth-child(2) {
          padding: 5px 8px;
          margin: 0 15px;
          background-color: #eaeaea;
          border-radius: 8px;
        }
        span:nth-child(3) {
          padding: 5px 8px;
          background-color: #eaeaea;
          border-radius: 8px;
        }
      }
      > .des {
        color: #424040d6;
        font-size: 13px;
        margin: 0 0 3px 10px;
        line-height: 18px;
        .van-icon-like {
          margin-right: 5px;
        }
      }
      > .look {
        margin: 12px 0 10px 10px;
        color: #2356ce;
        font-size: 13px;
      }
      > .titles {
        margin: 0 0 10px 10px;
        > em {
          color: #999;
          font-size: 14px;
          font-style: normal;
        }
        > span {
          margin-left: 10px;
          font-size: 14px;
          color: #333;
          .van-icon-checked {
            margin-right: 3px;
            color: #a89e9e;
          }
        }
      }
    }
  }

  .van-button--large {
    margin-right: 12px;
    color: #fff;
  }
  .van-goods-action-button {
    background-color: #333333b0;
    border-radius: 8px;
  }
  .van-goods-action {
    height: 49px;
    border-radius: 15px 15px 0 0;
  }
  .van-goods-action-icon {
    border-radius: 15px 0 0 0;
  }
}
</style>